<template>
	<view class="">
		<view class="page bg-white b_y">
			<view>
				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">店铺名称</text>
					</view>
					<input class="f28 in" type="text" placeholder="请输入店铺名称" v-model="name" />
				</view>
				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">商家手机号码</text>
					</view>
					<input class="f28 in" type="text" placeholder="请输入手机号码" v-model="mobile" />
				</view>
				<view class="f-d  bg-white p20 a-c bb" style="display: flex; padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">验证码</text>
					</view>
					<input class="f28" style="flex: 1;" type="text" placeholder="请输入验证码" v-model="vcode" />
					<text @click="getcode()" class="bb cff  q_y f28 pr2 pl2"
						style="background-color:#00ca00;padding-top:5rpx;padding-bottom: 8rpx;text-align: center;">{{codename}}</text>
				</view>
				<view class="f-d  bg-white p20 a-c bb" style="display: flex; padding-top: 40rpx;padding-bottom: 40rpx;">
					<!-- <view class="f-d " style=" display: flex;"> -->
					<view class=" c_pl" style="width: 180rpx;">
						<text class="f28 c_z">详细地址</text>
					</view>
					<textarea class="f28" style="flex: 1;" type="text" auto-height="" placeholder="请在地图上选择位置"
						v-model="address" disabled />
					<text @click="on_dingwen()" class="bb cff q_y f28 pr2 pl2"
						style="background-color:#0071FE;padding-top:5rpx;padding-bottom: 8rpx;">选择位置</text>
					<!-- </view> -->
					<!-- 	<view class="">
						<text @click="on_dingwen()" class="bb cff q_y f28 pr2 pl2"
							style="background-color:#0071FE;padding-top:5rpx;padding-bottom: 8rpx;">选择位置</text>
					</view> -->
				</view>
				<view class="f-d  bg-white p20 a-c bb" style="border: none; padding-top: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">美团链接</text>
					</view>
					<input class="f28 in" type="text" placeholder="美团小程序分享的复制链接" v-model="meituan" />
				</view>
				<view class="bg-white p20 a-c bb"
					style="padding-top: 10rpx;padding-bottom: 40rpx;color:#BBBBBB;text-align: center;">
					例:#小程序://美团外卖丨外卖美食XXX/xxxxx
				</view>
				<!-- v-if="pickerIndex==1||pickerIndex==2" -->
				<view class="f-d  bg-white p20 a-c bb" style="border: none; padding-top: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">饿了么链接</text>
					</view>
					<input class="f28 in" type="text" placeholder="饿了么小程序分享的复制链接" v-model="elem" />
				</view>
				<view class="bg-white p20 a-c bb"
					style="padding-top: 10rpx;padding-bottom: 40rpx;color:#BBBBBB;text-align: center;">
					例:#小程序://饿了么l外卖美食XXX/xxxxx
				</view>

				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx; ">
					<text class="f28 c_z">店铺头像</text>
				</view>
				<view class="flex">
					<view class="uni-uploader__input-box a-c j-c " style="margin-left: 20rpx;" v-if="show">
						<image class="b_y" style="height: 208rpx;width:208rpx;" :src="imageUrl" mode="aspectFill"></image>
					</view>
					<view style="margin-left: 20rpx;" @tap="on_img()" v-if="!show">
						<view class="flex a-c j-c" style="width: 200rpx;height: 200rpx;border: solid 2rpx #bfbfbf; ">
							<text class="bicon" style="font-size: 80rpx;color: #bfbfbf;">&#xe7dd;</text>
						</view>
					</view>
				</view>
			</view>
			<view class="a-c j-c flex" style="margin-top: 40rpx;">
				<view @click="on_agr" class="b_y a-c j-c"
					style="width: 30rpx;height: 30rpx;border: solid 2rpx #A9A9A9;">
					<text v-if="agr" class="f26 " style="color: #A9A9A9;">✓</text>
				</view>
				<text class="f30  ml1  " style="color: #A9A9A9;">我已阅读并同意</text>
				<text class="f30 " style="color: #1E90FF;" @click="urlse('/page1/user_account')">
					商家入驻合作协议
				</text>
			</view>
			<view class="flex j-c a-c">
				<button class="js-image-a" type="default"
					style="margin: 20upx;margin-bottom:100rpx; background-color: #0071FE;width: 600rpx;color: #fff;border-radius: 45rpx;"
					@tap="on_post()">
					<text class=" p20">免费入驻</text>
				</button>
			</view>
		</view>

	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	// import choose from "@/common/image/choose.vue"
	// import compress from "@/common/image/compress.vue"
	import $http from '@/common/requestConfig';
	// import avatar from "@/common/yq-avatar/yq-avatar.vue";
	// import LbPicker from '@/common/lb-picker';
	import {
		params
	} from '@/common/time_list.js';
	// import lclipper from "@/common/l-clipper/l-clipper.vue";
	import Url from "@/common/free-lib/config.js";

	export default {
		name: 'newsPublish',
		components: {
			// choose,
			// avatar,
			// compress,
			// LbPicker,
			// lclipper,
		},
		data() {
			return {
				agr: false,
				idtushow: false,
				isYasuo: true,
				imageUrl: '',
				show: false,
				url: '',
				isdingwei: true,
				img_list: [],
				nav_list: ['美团', '饿了么', '全部'],
				cata_time: params,
				list: [],
				cata_name: '请选择',
				shop_img: '',
				shop_tel: '',
				shop_tag: '',
				business_time: '请选择',
				shop_name: '',
				is_tupian: 0,
				selectLocatin: {
					location: {}
				},
				shop_img1: '',
				rendering: false,
				find_set: {},
				img_url: '',
				codename: '获取验证码',
				timetype: 0,

				name: '', //商家名称
				pic: '', //商家地图地址
				platform: '', //平台
				address: '', //地址名称
				latitude: '', //纬度
				longitude: '', //经度
				meituan: '', //美团url
				elem: '',
				mobile: '', //phone
				vcode: '', //验证码
				pickerIndex: 3
			}
		},
		onShow() {
			// 判断是否登录
			this.$module.ifToken(res => {
				if (res == 1) {
					this.$module.navigateTo('/pages/banmi/user_login')
				} else {
					return
				}
			})
		},
		onLoad() {
			this.shop_clause()
		},
		methods: {
			urlse(url){
				this.$module.navigateTo(url)
			},
			on_agr() {
				this.agr = !this.agr
			},
			on_img() {
				this.$module.showLoading('上传中')
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: res => {
						uni.uploadFile({
							url: Url.baseUrl + '/mehrb/nffw/oss/upload', //上传地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('Token'),
							},
							formData: {
								module: "jpeg", //图片类型
							},
							success: function(res) {
								uni.hideLoading()
								let arr = JSON.parse(res.data);
								that.imageUrl = arr.data.src;
								that.show = true;
								console.log(that.imageUrl, that.show)
								that.pic = arr.data.src
							},
							fail: function(error) {
								uni.hideLoading()
								that.$module.showToast('头像上传失败!')
							}
						})
					},
					fail: function(error) {
						uni.hideLoading()
						that.$module.showToast('取消上传')
					}
				});
			},
			getcode() { //获取验证码
				const that = this
				if (that.codename == '重新获取' || that.codename == '获取验证码') {
					if (that.$module.ifPhone(that.mobile)) {
						// that.codename = 60
						// var timer = setInterval(function() {
						// 	that.codename -= 1
						// 	if (that.codename == 0) {
						// 		clearInterval(timer) //关闭定时器
						// 		that.codename = '重新获取'
						// 	}
						// }, 1000)
						// 调用接口
						this.Htpp.post('/mehrb/nffw/sms/send/' + that.mobile, 'app', {
							token: true
						}).then(ret => {
							that.$module.sm(ret, 2, res => {
								console.log(res)
								if (res.code == 0) {
									that.codename = 60
									var timer = setInterval(function() {
										that.codename -= 1
										if (that.codename == 0) {
											clearInterval(timer) //关闭定时器
											that.codename = '重新获取'
										}
									}, 1000)
									that.$module.showToast('验证码发送成功')
								}
							})
						})
					}
				}
			},
			on_dingwen() { //选择地图位置
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.address = res.address; //地址名称
						that.latitude = res.latitude; //纬度
						that.longitude = res.longitude; //经度
					},
					fail(e) {
						console.log("e: " + JSON.stringify(e));
					}
				});
			},
			on_post() { //入驻店铺
				if (!this.name) {
					this.$module.showToast("请输入店铺名称")
					return
				} else if (!this.$module.ifPhone(this.mobile)) {
					return
				} else if (!this.address) {
					this.$module.showToast("请选择商家地址")
					return
				} else if (!this.pic) {
					this.$module.showToast("请上传店铺头像")
					return
				} else if (!this.agr) {
					this.$module.showToast("请勾选同意协议")
					return;
				} else {
					this.add_shop();
				}
			},
			init() { //查询用户信息
				this.Htpp.user_info().then(res => {
					this.$module.sm(res, 2, ret => {
						let data = ret
						if (data.data.user.itype == 2) {
							uni.setStorageSync('business', data.data.business)
						}
						uni.setStorageSync('user', data.data.user)
						uni.setStorageSync('fundsDTO', data.data.fundsDTO)
					})
				})
			},
			shop_clause() {
				let ss = uni.getStorageSync('publis').businessNotice
				let text = ''
				for (let x in ss) {
					text += ss[x] + '\n'
				}
				uni.showModal({
					title: '商家注册须知',
					content: text,
					showCancel: false,
					confirmText: '知道了'
				})
			},
			// time(picker) {
			// 	this.business_time = picker.value.join("-");
			// },
			on_navcate(picker) {
				let index = picker.index[0]
				this.pickerIndex = picker.index[0]
				this.platform = picker.index[0] + 1
				this.cata_name = picker.item[0];
			},
			add_shop() { //入驻调用接口
				const that = this
				that.$module.showLoading('入驻中')
				let date = {
					data: ''
				}
				let requestParams = {
					name: this.name, //商家名称
					address: this.address, //商家地图地址
					platform: this.platform, //平台
					address: this.address, //地址名称
					latitude: this.latitude, //纬度
					longitude: this.longitude, //经度
					meituan: this.meituan, //美团url
					elem: this.elem, //饿了么url
					mobile: this.mobile, //手机号码
					vcode: this.vcode,
					pic: this.pic //商家头像
				};
				this.$module.sm(requestParams, 1, res => {
					date.data = res
				})
				this.Htpp.post('/mehrb/meplus/business/save', 'app', {
					token: true,
					datalist: date
				}).then(ret => {
					this.$module.sm(ret, 2, res => {
						if (res.code == 0) {
							uni.setStorageSync('business', res.data.business)
							that.$module.switchTab('/pages/index/user_my')
							that.init()
						}
					})
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	/deep/.uni-modal__bd {
		white-space: pre-wrap !important;
		text-align: left !important;
		text-align: right;
	}

	.page {
		background-color: #fff;
		// height: 100vh;
		// padding-bottom: 200rpx;
	}

	.flex {
		margin-top: 20rpx;
	}

	.shuru {
		height: 250rpx;
		line-height: 50upx;
		width: 750rpx;
		border-width: 2rpx !important;
		border-right-style: solid !important;
		border-left-color: #FFFFFF !important;
		border-right-color: #FFFFFF !important;
		border-bottom-color: #D9D9D9 !important;
		border-top-color: #FFFFFF !important;
	}

	.input-view {
		font-size: 28upx;
	}

	.choose-location {
		padding: 30rpx;
	}

	.info-box {
		padding: 30rpx 0;
	}

	.info-box-item {
		padding-bottom: 20rpx;
	}

	.feedback-title {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;
		color: #8f8f94;
		font-size: 28upx;
	}

	.in {
		width: 500rpx;
		height: 50rpx;
	}

	.close-view {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		background-color: #FF5053;
		color: #FFFFFF;
		position: relative;
		top: -110px;
		right: -85px;
		font-size: 20rpx;
	}
</style>